<style scoped>
#prompt {
	padding: 60px 15px 0 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.box {
	width: 86vw;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	margin-top: 50px;
	padding: 20px 15px;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px 1px rgba(161, 161, 161, 0.2);
}
.box input {
	width: 180px;
	height: 30px;
	font-size: 18px;
	border-radius: 6px;
	border-top: none;
	border-left: none;
	border-right: none;
}
.text {
	margin-left: 10px;
	padding: 3px 10px;
	background-color: cadetblue;
	color: white;
	border-radius: 6px;
	border: none;
}
</style>
<template>
	<top-bar title="手机授权" :notBack="true" />
	<div id="prompt">
		<div class="box">
			<input type="text" v-model="text" placeholder="请输入手机号" />
			<button class="text" @click="sendVerificationCode()">获取验证码</button>
		</div>
	</div>
	<!-- 自定义底部栏 -->
</template>
<script setup>
// 导入自定义组件
import topBar from "@/components/topBar.vue"; //顶部导航栏
</script>
<script>
// import http from "../../js/api";
export default {
	data: () => ({
		text: "",
	}),
	created() {
		setTimeout(() => {
			console.log("3秒");
			// this.$router.push("/home");
		}, 3000);
	},
	methods: {
		sendVerificationCode() {
			const regex = /^1([3456789])\d{9}$/; // 手机号码正则表达式，以1开头，第二个数字为3~9，后面跟9个数字
			var b = regex.test(this.text);
			console.log(b, "aa");
		},
	},
};
</script>
